<template>
  <div class="container">
    <div class="sider">
      <a-menu mode="inline" theme="dark">
        <a-sub-menu v-for="item in permissionList" :key="item._id">
          <template #icon>
            <component :is="item.icon"></component>
          </template>
          <template #title>{{ item.title }}</template>
          <a-menu-item
            :key="subItem._id"
            v-for="subItem in item.children"
            @click="go(subItem.path)"
          >
            <template #icon>
              <component :is="subItem.icon"></component>
            </template>
            <span>{{ subItem.title }}</span>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
      <!-- {{ permissionList }} -->
    </div>
    <div class="content">
      <TabComponet :tabs="tabs"></TabComponet>
      <!-- 二级路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { Menu } from "ant-design-vue";
import useUserStore from "@/store/users";
import { useRouter } from "vue-router";
import TabComponet from "@/components/TabComponet.vue";
import useTabStore from "@/store/tabs";
import {storeToRefs} from 'pinia'
const store1 = useTabStore();
const tabs = storeToRefs(store1).getTabAry;
const store = useUserStore();
const nav = useRouter();
const permissionList = store.permissionList;
const go = (path: string) => {
  console.log("path", path);
  nav.push({
    path,
  });
};
</script>

<style lang='scss' scoped>
.container {
  display: flex;
  height: 100vh;
  .sider {
    width: 200px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .content {
    flex-grow: 1;
    height: 100%;
  }
}
</style>